<template>
    <div class="main-content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="query" ref="query" slot="form" label-width="80px" label-position="right" >
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="所属省" prop="provinceId">
                            <province v-model="query.provinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属市" prop="cityId">
                            <city v-model="query.cityId" :province="query.provinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="所属区县" prop="areaId">
                            <region v-model="query.areaId" :city="query.cityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                       <el-form-item label="负责人" prop="agentName">
                            <el-input v-model.trim="query.agentName" placeholder="请输入负责人关键字"></el-input>
                        </el-form-item> 
                    </el-col>    
                    <el-col :span="8">
                        <el-form-item label="申请时间">
                            <el-row>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="query.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="query.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center"> 至 </el-col>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="query.endDate" type="date" format="yyyy-MM-dd" placeholder="选择结束日期" :picker-options="query.pickerOptions2" @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>                
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="searchData">查询</el-button>                    
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click="exportList">导出</el-button>
                </div>
            </div>
            <el-table :data="tableList" v-loading="loading" border style="width: 100%">
                <el-table-column label="经销商名称" align="center" min-width="150">
                    <template scope="scope" >
                        <span>{{scope.row.fOrgUserName | isNull}}</span>    
                    </template>
                </el-table-column> 
    
                <el-table-column label="负责人" align="center">
                    <template scope="scope">
                        <span>{{scope.row.agentName | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="商品名称" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sServiceName | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="购买数量（张）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sCardCouponsNum | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="订单销售额（元）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sOrderMoney | isNull}}</span>
                    </template>
                </el-table-column>
    
                <el-table-column label="活动价格（元）" align="center">
                    <template scope="scope">
                        <span>{{scope.row.sShouldPayMoney | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="申请时间" min-width="170" align="center">
                    <template scope="scope">
                        <span>{{ scope.row.sCreateTime | isNull}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="100">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="audit(scope.row)" v-if="scope.row.sStatus == '0'">审核</el-button>
                        <el-button type="text" class="btn-success" @click="audit(scope.row)" v-if="scope.row.sStatus == '1'">审核通过</el-button>
                        <el-button type="text" class="btn-success" @click="audit(scope.row)" v-if="scope.row.sStatus == '2'">审核拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" 
                :current-page.sync="pageQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" 
                @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <!-- 审核dialog -->
        <audit-card :auditData='auditData' @search="queryData"></audit-card>
    </div>
</template>

<script>
import moment from 'moment';
import Cookies from 'js-cookie';
import Levelbar from '../../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import auditCard from './auditCard';
import { pageCardCoupons} from 'api/cardCoupons'; // , exportCardCoupons 
import { mapState, mapActions } from 'vuex';

export default {
    name: 'cardAuditList',
    components: { Levelbar, TableLayout, province, city, region, auditCard },
    data() {
        return { 
            auditData: {
                dialogState: false,
                showData: {
                    orgUserName: '',
                    orgRealUserName: '',
                    serviceName: '',
                    cardCouponsNum: '',
                    orderMoney: '',
                    shouldPayMoney: '',
                    createTime: '',
                    pid: '',
                    schoolName: '',
                    status: '',
                    type: '',
                    timestore: '',
                    reason: null
                }
            },
            loading: true,  
            tableData: [],
            pageQuery: {
                page: 1,
                total: 0
            },
            query: {
                provinceId: '',
                cityId: '',
                areaId: '',
                agentName: '',
                startDate: '',
                endDate: '',
                pickerOptions1: {},
                pickerOptions2: {}
            }
        }
    },
    created() {
        this.queryData();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    filters: {
        dateFilter(val) {
            if (val) {
                return val.substring(0, 19)
            } else {
                return '--'
            }               
        }
    },
    methods: {
        // 功能：开始日期选择
        dateChange1(date) {
            this.query.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime() - 8.64e7 ;
                }
            };
        },

        // 功能：结束日期选择
        dateChange2(date) {
            this.query.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime();
                }
            };
        },

        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.page = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.pageQuery.page = val;
            this.queryData();
        },
        searchData() {
            this.pageQuery.page = 1;
            this.queryData();
        },
        queryData() {
            this.loading = true;
            this.tableList = [];
            let start = this.query.startDate == ''?'':moment(this.query.startDate).format('YYYY-MM-DD');
            let end = this.query.endDate == ''?'':moment(this.query.endDate).format('YYYY-MM-DD');
            pageCardCoupons(
                    this.pageQuery.page, 
                    this.config.pageSize,
                    this.query.provinceId,
                    this.query.cityId,
                    this.query.areaId,
                    this.query.agentName,
                    start,
                    end).then(response => {
                        this.tableList = response.data.content.list;
                        // console.log(this.tableList);
                        this.pageQuery.total = response.data.content.pagination.total;
                        this.loading = false;
                    });
        },
        audit(row) {
            this.auditData.dialogState = true;
                // Object.assign(this.auditData, row);
            this.auditData.showData.orgUserName = row.fOrgUserName;
            this.auditData.showData.agentName = row.agentName;
            this.auditData.showData.serviceName = row.sServiceName;
            this.auditData.showData.cardCouponsNum = row.sCardCouponsNum;
            this.auditData.showData.orderMoney = row.sOrderMoney;
            this.auditData.showData.shouldPayMoney = row.sShouldPayMoney;
            this.auditData.showData.createTime = row.sCreateTime;
            this.auditData.showData.pid = row.pId;
            this.auditData.showData.schoolName = row.sSchoolName;
            this.auditData.showData.status = row.sStatus;
            this.auditData.showData.type = row.sType;
            this.auditData.showData.timestore = row.timestore;
            this.auditData.showData.reason = row.sReason;
        },

        // 导出
        exportList() {
            let token = Cookies.get('accessToken');
            // console.log('token', token)
            let start = this.query.startDate == ''?'':moment(this.query.startDate).format('YYYY-MM-DD');
            let end = this.query.endDate == ''?'':moment(this.query.endDate).format('YYYY-MM-DD');
            // 调用接口
            // console.log('agentName', this.query.agentName);
            
            window.location.href = `${LOCAL_API.yy}/incrementCard/exportCardCoupons?provinceId=${this.query.provinceId}&cityId=${this.query.cityId}&areaId=${this.query.areaId}&startDate=${start}&endDate=${end}&agentName=${this.query.agentName}&token=${token}`;        
        }
    }
}
</script>

<style lang="scss" scoped>

</style>

